<template>
  <!-- 开药页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="病 人 开 药">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 反显区域 -->
    <van-form>
      <van-field
        disabled
        v-model="patientMsg.name"
        name="病人姓名"
        label="病人姓名"
      />
      <van-field disabled v-model="patientMsg.sex" name="性别" label="性别" />
      <van-field disabled v-model="patientMsg.age" name="年龄" label="年龄" />
      <van-field
        disabled
        v-model="patientMsg.description"
        name="病情描述"
        label="病情描述"
      />
      <van-field
        disabled
        v-model="patientMsg.idCard"
        name="身份证"
        label="身份证"
      />
    </van-form>
    <p class="txtStyle">开药</p>

    <div class="main">
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item style="text-align: left" prop="medication">
          <div v-for="(item, index) in editForm.dynamicItem" :key="index">
            <el-form-item label="描述" prop="medication">
              <el-input
                type="text"
                v-model="item.medication"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="名称" prop="sex">
              <el-select
                ref="drugName"
                value-key=""
                v-model="item.drugId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in drugDictionary"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="数量" prop="cardId">
              <el-input
                type="number"
                v-model="item.num"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-button
              style="margin-left: 10px"
              @click="deleteItem(index)"
              type="danger"
              >删除</el-button
            >
          </div>
        </el-form-item>
      </el-form>

      <button @click="addItem">+增加</button>
    </div>

    <!-- 底部提交按钮 -->
    <div class="SubmitBtn">
      <van-button round type="info" block @click="SubmitBtn(patientMsg.idCard)"
        >完成开药</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Prescribe",

  data() {
    return {
      id: "", //病人id
      //反显病人信息
      patientMsg: {
        name: "",
        sex: "",
        age: "",
        description: "",
        idCard: "",
      },
      //药品库存列表
      drugList: [],
      value: "",
      //选择的药品列表
      selectDrug: [{ name: "", num: "" }],
      editForm: {
        dynamicItem: [],
      },
      editFormRules: {},
      //获取药品数据
      drugDictionary: [],
    };
  },

  mounted() {},

  created() {
    //一进来首先获取病人id
    this.id = this.$route.query.id;
    console.log("当前病人id： " + this.id);
    this.getMsg(this.id);
    //获取药品库存
    this.getDrugList();
    this.addItem();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./hospitalization",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //获取病人信息
    getMsg(id) {
      this.$http
        .get("outpatient-register/" + id, {})
        .then((res) => {
          console.log(res);
          let data = res.data.data;
          this.patientMsg.name = data.name;
          this.patientMsg.sex = data.sex;
          this.patientMsg.age = data.age;
          this.patientMsg.description = data.description;
          this.patientMsg.idCard = data.cardId;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取药品库存
    getDrugList() {
      this.$http.get("drug-dictionary", {}).then((res) => {
        //console.log(res);
        this.drugDictionary = res.data.data;
      });
    },
    //增加药品点击
    addDrug() {
      console.log(this.selectDrug);
      this.selectDrug.push({
        name: "",
        num: "",
      });
    },
    //选择药品后
    selected(index) {
      console.log(index);
    },

    //提交按钮点击
    SubmitBtn(id) {
      this.editForm.dynamicItem.forEach((value) => {
        value["idCard"] = id;
      });
      console.log(this.editForm);
      this.$http.post("medication-log", this.editForm.dynamicItem).then(() => {
        Toast("开药成功");
        setTimeout(() => {
          this.$router.push({
            path: "./hospitalization",
          });
        }, 800);
      });
    },

    addItem() {
      this.editForm.dynamicItem.push({
        params: "",
      });
    },
    deleteItem(index) {
      this.editForm.dynamicItem.splice(index, 1);
    },

    hospitalization(id) {
      console.log("住院跳转过来： " + id);
      this.$http.get("hospitalization-register/" + id, {}).then((res) => {
        console.log(res);
        let data = res.data.data;
        this.patientMsg.name = data.name;
        this.patientMsg.sex = data.sex;
        this.patientMsg.age = data.age;
        this.patientMsg.description = data.description;
        this.patientMsg.idCard = data.idcard;
      });
    },
  },

  //若是从住院详情页面跳转过来，调用不同接口
  beforeRouteEnter(to, from, next) {
    if (from.name == "patientMore") {
      next((ev) => {
        let id = window.localStorage.getItem("hospitalizationId");
        ev.hospitalization(id);
      });
    }
    next();
  },
};
</script>

<style lang="less" scoped>
.txtStyle {
  text-align: center;
  font-size: 28px;
  padding: 20px 0;
  color: #00b894;
}
.drugAdd {
  display: flex;
  input {
    width: 80px;
    font-size: 15px;
    text-align: center;
  }
}
.main {
  margin-bottom: 45px;
}
.main /deep/ .el-form-item__content {
  margin-left: 0 !important;
}
.el-select {
  display: block;
}
.main /deep/ .el-input__suffix {
  top: 20px !important;
}
</style>